<template>
    <view class="container">
        <view class="wrapper">
            <view class="form">
				<u-form :model="form" ref="uForm">
					<u-form-item label="账号" prop="mobile">
						<u-input v-model="form.mobile" placeholder="请输入账号" />
					</u-form-item>
					<u-form-item label="密码" prop="password">
						<u-input type="password" v-model="form.password" placeholder="请输入密码" />
					</u-form-item>
				</u-form>
			</view>
            <button class="confirm-btn" :class="isDisable ? 'disable':''" @click="toSubmit">
				<u-loading mode="flower" :show="isLoading"></u-loading>	登录
			</button>
            <view style="margin-top: 32px;text-align: center">
                <view>
					没有账号？
                    <text style="color: #e10a07" @click="register()">立即注册</text>
                </view>
				<view style="margin-top: 30rpx;">
					忘记密码？
					<text style="color: #e10a07" @click="forget()">找回密码</text>
				</view>
            </view>
        </view>
		<view class="quick-login">
			<view class="title">
				<text>————— 快捷登陆 —————</text>
			</view>
			<view class="icons">
				<u-icon custom-prefix="g-icon" class="ql-icon" name="phone_" color="rgb(162, 162, 162)" size="86" @click="quick_login_vcode"></u-icon>
				<u-icon class="ql-icon" name="weixin-circle-fill" color="rgb(4,174,15)" size="86" @click="quick_login_weixin"></u-icon>
				<u-icon class="ql-icon" name="qq-circle-fill" color="rgb(74,154,253)" size="86" @click="quick_login_qq"></u-icon>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
		computed:{
			isDisable(){
				return this.form.mobile.length < 1 || 
				this.form.password.length < 1 || this.isLoading;
			}
		},
        data() {
            return {
				rules:{
					mobile:[{
						required: true, 
						message: '请输入账号',
						trigger: ['change','blur']
					},
					{
						// 自定义验证函数
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
					],
					password:{
						required: true, 
						message: '请输入密码',
						trigger: ['change','blur']
					},
				},
				form:{
					mobile: '',
					password: '',
				},
				isLoading: false,
				loginCode: '',
            }
        },
		onReady() {
			const that = this
			this.$refs.uForm.setRules(this.rules);
		},
        methods: {
			quick_login_vcode() {
			    this.$myRouter.push({name:'index/login_vcode'})
			},
			quick_login_weixin(){
				const that = this
				// #ifdef H5
				this.$myRouter.push({name:'index/wechat_login'})
				// #endif
				// #ifdef MP-WEIXIN
				wx.login({
				  success (loginRes) {
				    if (loginRes.code) {
				      that.loginCode = loginRes.code
				    } else {
				      console.log('登录失败！' + res.errMsg)
				    }
				  }
				})
				wx.getUserProfile({
					lang:'zh_CN',
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
					  uni.showLoading({
						
					  })
					console.log(res)
					if (res.errMsg === "getUserProfile:ok"){
						that.$api.home.wechatMpLogin({
							code:that.loginCode,
						  encryptedData:res.encryptedData,
						  iv: res.iv
						}).then(mpRes => {
						  console.log(mpRes)
						  that.$store.dispatch('setMemberLogin',mpRes)
						  setTimeout(function() {
							that.$u.toast('登陆成功')
							setTimeout(function() {
								that.$myRouter.back()
							}, 1500);
						  }, 500);
						}).catch(err => {
							that.$u.toast('登陆失败，请重新登陆')
						})
					}
					},
					fail: (ff) => {
					  console.log(ff)
					  that.$u.toast(ff.errMsg)
					}
				})
				// #endif
			},
			quick_login_qq(){
				this.$u.toast('开发中')
			},
            forget() {
                this.$myRouter.push({name:'index/forget'})
            },
            register() {
                this.$myRouter.push({name:'index/register'})
            },
            toSubmit() {
				let that = this
				if(that.isDisable || that.isLoading){
					return false
				}
                that.$refs.uForm.validate(valid => {
					if (valid) {
						that.isLoading = true
						that.$api.member.login({
							account:that.form.mobile,
							password:that.form.password,
						}).then(res => {
							that.isLoading = false
							console.log(res)
							// 设置 store状态
							that.$store.dispatch('setMemberLogin',res)
							that.$u.toast('登陆成功')
							that.$myRouter.back()
						}).catch(err => {
							that.isLoading = false
							that.$u.toast(err.message)
						})
					} else {
						console.log('验证失败');
					}
				});
            },
            getUserInfo(userId, token) {
                
            }
        },

    }
</script>

<style lang='scss'>
    @import '@/static/css/login.scss';
	
	.quick-login{
		.title{
			color: #AAA;
		}
		.icons{
			margin-top: 30rpx;
			.ql-icon{
				margin-left: 30rpx;
				&:first-child{
					margin-left: 0;
				}
			}
		}
	}
</style>
